<template>
  <div class="fry">
    <div class="free">
      <loading :state="stateLo"></loading>
      <div class="top-m">
        <div class="top-i">
          <p class="p2" style="line-height: 1.6">已开通名额</p>
          <span>{{numCount.is_access}}</span>
        </div>

        <div class="top-i">
          <p class="p2" style="line-height: 1.6">未开通名额</p>
          <span>{{numCount.count}}</span>
        </div>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
      >
        <!--<van-cell-->
        <!--v-for="(good, key) in goods"-->
        <!--:key="key"-->
        <!--class="cell"-->
        <!--&gt;-->
        <!--<single-good :good="good" :region="region"></single-good>-->
        <!--</van-cell>-->
      </van-list>
      <p v-if="finished" class="no-more">敬请期待更多产品</p>
      <vip-list-item :item="item" v-if="listState"></vip-list-item>
    </div>
    <search-input-s
      @feedData="feedData"
      class="sear"/>
  </div>

</template>
<script>
  import SearchInputS from '@/components/user/SearchInputS.vue';
  import vipListItem from '@/components/user/vipListItem.vue';

  export default {
    /**
     * 免费vip
     */
    name: 'freevip',
    components: {SearchInputS, vipListItem},
    data() {
      return {
        stateLo: true, // 加载动画
        numCount: {}, // 主数量
        userUid: this.$store.state.login.userUid, // 当前用户id
        stateLoad: false,
        loading: false, // 列表查询相关
        LastData: [], // 数据是否加载完没有了
        finished: false,
        page: 0,
        item: {},
        listState: false
      };
    },
    created() {
      this.LastData = new Array(1).fill(false);
      this.loadData1();
    },
    methods: {
      feedData(res) {
        console.log(res, '这次是实打实的res');
        if (res !== '') {
          // this.listState = false;
          // 组装数据
          this.item = res.data;
          this.listState = true;
          // this.memData = res.data;
          // console.log(this.memData, '这次是实打实的');
        } else {
          // this.memData.status = '';
          // this.listState = true;
        }
      },
      // readySelect(state) {
      //   //        this.listState = false;
      //   alert('该用户非您下级，或暂无上级，您不能查询!');
      //   this.stateLoad = state;
      // },
      loadData1() {
        //  /consumer/api/query/free
        // 已开通数量，还要多少名额
        this.$UserReq.getVip().then((res) => {
          //  查询的数据
          console.log(res, 'rerrerere');
          this.numCount = res.data;
          this.stateLo = false;
        });
      },
      onLoad() {
        // let that = this;
        if (this.finished === false) {
          // 异步更新数据
          setTimeout(() => {
            // let good = {
            //   page: this.page,
            //   size: 8,
            //   type: 'simple',
            //   id: this.$route.query.region
            // };
            // this.$Sale.products(good).then(res => {
            //   this.page++;
            //   that.goods = that.goods.concat(res.data);
            //   if (res.data.length === 0) {
            //     that.finished = true;
            //   }
            //   this.loading = false;
            // }, () => {
            // });
          }, 500);
        }
      }
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .fry {
    .free {
      flex-y()
      padding-top 2vw
      .top-m {
        width 92vw
        height 12vw
        background white
        border-radius vw(10)
        flex-x(, stretch)
        .top-i {
          flex 1
          flex-y(center)
        }
      }
    }
    .sear {
      position fixed
      bottom 0
    }
  }

</style>
